<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物上天猫</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
		<div id="myindex">
	<div id="header">
			<div class="header_left">
				<img src="images/shouye.webp" class="shouyeImg">
				<a href="index.jsp">天猫首页</a>&nbsp;&nbsp;
				<span>喵，欢迎来天猫</span>&nbsp;&nbsp;
				<c:choose>
					<c:when test="${empty loginUser}">
						<a href="login.jsp">请登录……</a>&nbsp;&nbsp;
					</c:when>
					<c:when test="${!empty loginUser}">
						<a href="login.jsp">${loginUser.userName}</a>&nbsp;&nbsp;
					</c:when>
				</c:choose>
				<a href="register.jsp">免费注册</a>  
			</div>
			<div class="header_right">
				<div class="myshow1">
					<a href="#" class="mymove1">我的淘宝</a>&nbsp;&nbsp;
					<div id="mytaobao">
						<a href="#">已买到的宝贝</a><br>
						<a href="#">已卖出的宝贝</a>
					</div>
				</div>
				<img src="images/car.png">
				<a href="shopcar.jsp">购物车</a>&nbsp;&nbsp; 	
				<div class="myshow2">
					<a href="collect.do" class="mymove2">收藏夹</a>&nbsp;&nbsp;|&nbsp;&nbsp;	
					<div id="shoucangjia">
						<a href="#">收藏的宝贝</a><br>
						<a href="#">收藏的店铺</a>
					</div>
				</div>
				<img src="images/nav9.png" alt="" class="myphon">
				<div class="myshow3">
					<a href="" class="mymove3">手机版</a>&nbsp;&nbsp;
					<div id="myshoujiban">
						<img src="images/TB14.png" alt="">
					</div>
				</div>
				<a href="https://www.taobao.com/">淘宝网</a>&nbsp;&nbsp;
				<a href="">网页无障碍</a>&nbsp;&nbsp;
				<a href="">商家支持</a>
			</div>
		</div>
	<div id="box">
		<div id="center">
			<div id="nav">
				<img src="images/tmallLogo.png" alt="">
				<form action="search.html" method="get">
					<input type="text" name="keyword" placeholder="搜索 天猫 商品/品牌/店铺">
					<input type="submit" value="搜索">
				</form>
			</div>
			<div id="tbody">
				<div id="tbody_top">
					<div class="tbody_top_left">
						<div class="tbody_top_left_top">
							市场主题
						</div>
						<div class="tbody_top_left_bottom">
							<ul>
								<li><a href="women.jsp">女装</a>&nbsp;&nbsp;ONLY&nbsp;/&nbsp;LILY&nbsp;/&nbsp;三彩</li>
								<li><a href="man.jsp">男装</a>&nbsp;&nbsp;海南之家&nbsp;/&nbsp;Prada</li>
								<li><a href="cos.jsp">美妆</a>&nbsp;&nbsp;阿玛尼&nbsp;/&nbsp;兰蔻&nbsp;/&nbsp;迪奥</li>
								<li><a href="phone.jsp">手机</a>&nbsp;&nbsp;华为&nbsp;/&nbsp;vivo&nbsp;/&nbsp;oppo</li>
								<li><a href="computer.jsp">电脑办公</a>&nbsp;&nbsp;惠普&nbsp;/&nbsp;戴尔&nbsp;/&nbsp;华硕</li>
								<li><a href="food.jsp">零食</a>&nbsp;&nbsp;三只松鼠&nbsp;/&nbsp;百草堂</li>
								<li><a href="homeAppliances.jsp">生活电器</a>&nbsp;&nbsp;美的&nbsp;/&nbsp;海尔</li>
								<li><a href="book.jsp">图书音像</a>&nbsp;&nbsp;小说&nbsp;/&nbsp;历史&nbsp;/&nbsp;散文</li>
							</ul>
						</div>
					</div>
					<div class="tbody_top_right">
						<div class="tbody_top_right_top">
							<a href="#"><img src="images/TB1t5ObaBxRMKJjy0FdXXaifFXa-200-60.png"></a>&nbsp;&nbsp;
							<a href="#"><img src="images/TB1ztBlaMMPMeJjy1XbXXcwxVXa-200-60.png"></a>&nbsp;&nbsp;
							<a href="#">天猫会员</a>&nbsp;&nbsp;
							<a href="#">喵先生</a>&nbsp;&nbsp;
							<a href="#">医药馆</a>&nbsp;&nbsp;
							<a href="#">魅力惠</a>&nbsp;&nbsp;
							<a href="#">飞猪旅行</a>&nbsp;&nbsp;
							<a href="#">苏宁易购</a>&nbsp;&nbsp;
							<a href="#">天猫会员</a>&nbsp;&nbsp;
						</div>
						<div class="tbody_top_right_bottom">
							<div class="tbody_top_right_bottom_left">
								<img src="images/O1CN01.webp" alt="" name="myImg">
								<img src="images/O1CN01kyef.webp" alt="" name="myImg">
								<img src="images/O1CN01Y8.jpg" alt="" name="myImg">
								<img src="images/TB1lUZLJVX.jpg" alt="" name="myImg">
								<ul>
									<a href="#"><li onmouseout="outStart()" onmouseover="myshow(1)" name="myLi"></li></a>
									<a href="#"><li onmouseout="outStart()" onmouseover="myshow(2)" name="myLi"></li></a>
									<a href="#"><li onmouseout="outStart()" onmouseover="myshow(3)" name="myLi"></li></a>
									<a href="#"><li onmouseout="outStart()" onmouseover="myshow(4)" name="myLi"></li></a>
								</ul>
							</div>
							<div class="tbody_top_right_bottom_right">
								<img src="images/shop.jpg">
							</div>
						</div>
					</div>
				</div>
				<div id="tbody_bottom">
					
					<div id="one">
						<div id="tianmaoshop">
							<img src="images/O1CN01obvh6l1iRpMLSol1z_!!6000000004410-2-tps-214-68.png_110x10000.jpg_.webp">
						</div>
						<div id="tbody_bottom_one">
							<div class="tbody_goods1"><a href=""></a></div>
							<div class="tbody_goods2"><a href=""></a></div>
							<div class="tbody_goods3"><a href=""></a></div>
							<div class="tbody_goods4"><a href=""></a></div>
							<div class="tbody_goods5"><a href=""></a></div>
						</div>	
					</div>
					<div id="two">
						<div id="international">
							<img src="images/O1CN01DWQY2W1U1LqMYx8RJ_!!6000000002457-2-tps-214-68.png_110x10000.jpg_.webp">
						</div>
						<div id="tbody_bottom_two">
							<div class="tbody_goods6"></div>
							<div class="tbody_goods7"></div>
							<div class="tbody_goods8"></div>
							<div class="tbody_goods9"></div>
							<div class="tbody_goods10"></div>
						</div>	
					</div>
					<div id="two">
						<div id="hobby">
							猜你喜欢
							<span>个性推荐</span>
						</div>
						<div id="tbody_bottom_three">
							<div class="tbody_goods11"></div>
							<div class="tbody_goods12"></div>
							<div class="tbody_goods13"></div>
							<div class="tbody_goods14"></div>
							<div class="tbody_goods15"></div>
						</div>
						<div id="tbody_bottom_fore">
							<div class="tbody_goods16"></div>
							<div class="tbody_goods17"></div>
							<div class="tbody_goods18"></div>
							<div class="tbody_goods19"></div>
							<div class="tbody_goods20"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="footer_top">
				<div class="footer_top_one">
					<a href="index.jsp">
						<div class="you">
							优
						</div>
					</a>
					<div class="span1">
						品质保障<br>
						<a href="">品质护航</a>
						<a href="">购物无忧</a>
					</div>
				
				</div>
				<div class="footer_top_two">
					<a href="">
						<div class="qi">
							七
						</div>
					</a>
					<div class="span1">
						七天无理由退换货<br>
						<a href="">为您提供售后无忧保障</a>
					</div>
					
				</div>
				<div class="footer_top_three">
					<a href="">
						<div class="te">
							特
						</div>
					</a>
					<div class="span1">
						特色服务体验<br>
						<a href="">为您呈现不一样的服务</a>
					</div>
				</div>
				<div class="footer_top_fore">
					<a href="">
						<div class="bang">
							帮
						</div>
					</a>
					<div class="span1">
						帮助中心<br>
						<a href="">您的购物指南</a>
					</div>
				</div>
			</div>
			<div class="footer_center">
				<div class="footer_center_one">
					购物指南<br>
					<a href="">免费注册</a><br>
					<a href="">开通支付宝</a><br>
					<a href="">支付宝充值</a>
				</div>
				<div class="footer_center_two">
					天猫保障<br>
					<a href="">发票保障</a><br>
					<a href="">售后规则</a><br>
					<a href="">物流实效保障</a>
				</div>
				<div class="footer_center_three">
					支付方式<br>
					<a href="">快捷支付</a><br>
					<a href="">幸运卡</a><br>
					<a href="">支付宝</a><br>
					<a href="">蚂蚁花呗</a>
				</div>
				<div class="footer_center_fore">
					商家服务<br>
					<a href="">天猫规则</a><br>
					<a href="">商家入住</a><br>
					<a href="">商家中心</a><br>
					<a href="">天猫必修课</a><br>
					<a href="">喵言喵语</a><br>
					<a href="">运营服务</a>
				</div>
				<div class="footer_center_five">
					手机天猫<br>
					<img src="images/TB14.png" alt="">
				</div>
			</div>
			
		</div>
	</div>
	<div id="myfooter">
		<div class="footer_footer">
				<a href="#">关于天猫</a>
				<a href="#">商家服务大厅</a>
				<a href="#">开放平台</a>
				<a href="#">诚聘英才</a>
				<a href="#">联系我们</a>
				<a href="#">网站合作</a>
				<a href="#">法律声明</a>
				<a href="#">隐私权政策</a>
				<a href="#">知识产权</a>
				<a href="#">廉正举报</a>
				<a href="#">不当竞争举报</a><br>
				<a href="#">阿里巴巴集团</a>
				<a href="#">&nbsp;|&nbsp;淘宝网</a>
				<a href="#">&nbsp;|&nbsp;天猫</a>
				<a href="#">&nbsp;|&nbsp;聚划算</a>
				<a href="#">&nbsp;|&nbsp;全球速卖通</a>
				<a href="#">&nbsp;|&nbsp;阿里巴巴国际交易市场</a>
				<a href="#">&nbsp;|&nbsp;1688</a>
				<a href="#">&nbsp;|&nbsp;阿里妈妈</a>
				<a href="#">&nbsp;|&nbsp;飞猪</a>
				<a href="#">&nbsp;|&nbsp;阿里云计算</a>
				<a href="#">&nbsp;|&nbsp;AliOS</a>
				<a href="#">&nbsp;|&nbsp;阿里通信</a>
				<a href="#">&nbsp;|&nbsp;万网</a>
				<a href="#">&nbsp;|&nbsp;高德</a>
				<a href="#">&nbsp;|&nbsp;UC</a>
				<a href="#">&nbsp;|&nbsp;友盟</a>
				<a href="#">&nbsp;|&nbsp;虾米</a>
				<a href="#">&nbsp;|&nbsp;钉钉</a>
				<a href="#">&nbsp;|&nbsp;支付宝</a>
				<a href="#">&nbsp;|&nbsp;阿里安全</a><br>
				
				<span>
					增值电信业务经营许可证：浙B2-20110446&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市场名称登记证：工商网市字3301004119号 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号
				</span><br>
				<span>
					互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资质证书编号：浙-（经营性）-2017-0005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" alt="">浙公网安备 33010002000120号
				</span><br>
				<span>
					医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 网络文化经营许可证：浙网文 [2021]1668-073号&nbsp;<img src="images/O1CN01VEHhJi1T2RCHFYS81_!!6000000002324-1-tps-65-70.gif" alt="" class="myFooterImg">
				</span><br>
				<span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12318举报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浙B2-20110446-1</span><br>
				<span>&copy;2003-现在 TMALL.COM 版权所有</span><br>
				<div class="myFooterImg2">
					<img src="images/O1CN01Hs1MVu1IDvM07YrGh_!!6000000000860-2-tps-293-143.png" alt="">
				</div>
				
			</div>
	</div>
</div>
<c:if test="${!empty loginUser.userId}">
<input id="userId" value="${loginUser.userId}" type="hidden">
</c:if>
</body>
<script src="js/index.js" language="JavaScript"></script>
<script src="js/jquery.min.js"></script>
<script>
load();

	var userId = $("#userId").val();
	function addGoodsInCar(thisId){
		$.ajax({
			url:"/shopping/addGoodsGoShopCar.do",
			type:"GET",
			data:{
				"gId":thisId,
				"userId":userId
			},
			success:function(data){
				
			}
		});
		
	}
	
	function goodsmsg(thisId){
		window.location.href = "/shopping/minute.jsp?gId="+thisId;
	}
	
	function load(){
		var keyword = '首页';
		var pageNum = 1;
		var pageSize = 20;
		$.ajax({
			url:"/shopping/indexServlet.do",
			type:"GET",
			data:{
				"keyword":keyword,
				"pageNum":pageNum,
				"pageSize":pageSize
			},
			success:function(data){
				var d = data.data;
				for(var i = 0; i < d.length;i++){
					var goods = d[i];
					var $input1 = $("<input type='hidden' name='gId'>").val(goods.goodsId);
					var $img = $("<img class='goods_image'>").attr({src:goods.gImage,alt:"图片走丢了"}).height(200).width(200);
					var $input = $("<input type='button' value='添加到购物车' class='upGoods'>").css({
						height:"30px",
						width:"130px"
					}).click(function(){
						if(userId == null){
							window.location.href = "login.jsp";
						}else{
							var gId = $(this).prevUntil($input1);
							var gs;
							for(var i =0; i < gId.length;i++){
								gs = gId[1];
							}
							var num = $(gs).val();
							addGoodsInCar(num);
							$(this).val("添加成功");
						}
						
						
					})

					var $h4 = $("<h4></h4>").text("￥"+goods.gPrice);
					
					$(".tbody_goods"+(i+1)).append($img).append($input1).append($h4).append($input);
					$(".tbody_goods"+(i+1)).css({
						"float":"left",
						width:"20%"
					})//,.mytitle
					$(".tbody_goods"+(i+1)).children(".goods_image").click(function(){
						var gs = $(this).next($input1);
						var num = $(gs).val();
						goodsmsg(num);
					})
				}
				
				
			}	
		})
	}
</script>
</html>